<!-- 活动详情 -->
<template>
  <div>
    <div class="hdDetails_wrapper">
      <div class="UpPart">
        <img class="top_img" :src="picUrl(DetailData.url)" />
        <div class="text_box">
          <span>{{DetailData.activityStatus}}</span>
          <span>{{DetailData.title}}</span>
        </div>
        <div class="Statistics">
          <img src="@/assets/activity/chakan.png" alt />
          <span class="sz">{{DetailData.browseTimes}}</span>
          <span>报名：{{BMrs}}/{{DetailData.signUpNumber}}</span>
        </div>
      </div>
      <div style="height:20px;width:90vw;background:#f8f8f8;"></div>
      <div class="LowerPart">
        <div class="Situation">
          <div class="fk"></div>参与情况
        </div>
        <van-divider />
        <div class="signUp">
          <div>
            <span>
                        已报名（
                        <span style="color:#ffdebd;">{{BMrs}}</span>）
            </span>
            <img src alt />
          </div>
          <!-- <div class="ckqb">查看全部<img src="@/assets/activity/jiantou.png" alt=""></div> -->
        </div>
        <div class="Situation jl">
          <div class="fk"></div>活动信息
        </div>
        <van-divider />
        <div class="wenzi">
          <!-- <p>活动主题：{{DetailData.description}}</p> -->
          <div>活动主题：
            <p v-html="DetailData.description"></p>
          </div>
          <p>活动时间：{{DetailData.createTime}}</p>
          <p>
            活动地点：
            <img src="@/assets/activity/dingweilv.png" alt />
            <span>{{DetailData.adress}}</span>
          </p>
          <p>发布单位：<span class="nlfb">{{DetailData.regionName}}</span></p>
        </div>
        <div class="dslr">
          <div class="icons" value="0" @click="localValus.zan.length > 0 ? removeLeiren('0', '赞') :comments('0', '赞')">
            <img v-if="localValus.zan.length > 0" src="@/assets/aaa/s1.png" height="20px" />
            <img v-else src="@/assets/aaa/s2.png" height="20px" />
            <div class="tips">赞({{values0}})</div>
          </div>
          <div class="icons" value="1" @click=" localValus.jiayou.length > 0 ? removeLeiren('1', '加油') : comments('1', '加油')">
            <img v-if="localValus.jiayou.length > 0" src="@/assets/aaa/m1.png" height="20px" />
            <img v-else src="@/assets/aaa/m2.png" height="20px" />
            <div class="tips">加油({{values1}})</div>
          </div>
          <div class="icons" value="2" @click=" localValus.leiren.length > 0 ? removeLeiren('2', '雷人') : comments('2', '雷人')">
            <img v-if="localValus.leiren.length > 0" src="@/assets/aaa/r1.png" height="20px" />
            <img v-else src="@/assets/aaa/r2.png" height="20px" />
            <div class="tips">雷人({{values2}})</div>
          </div>
        </div>
        <div :class="ifSignUp?  'wybm': 'wybmgry'" @click="participateIn">{{ ifSignUp ? "我要报名":"我已报名" }}</div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "activtyDetails",
    data() {
      let date = this.slow.getTime("date");
      console.log(date);
      let localkey = date + "_zjl_" + this.$route.query.DetailData.id;
      let localValus = {
        zan: [],
        jiayou: [],
        leiren: []
      };
      // if (window.localStorage.getItem(localkey)) {
      //   localValus = JSON.parse(window.localStorage.getItem(localkey));
      //   console.log(localValus)
      // }
      return {
        ifSignUp: true,
        DetailData: "", //列表传入数据
        BMrs: "", //报名人数
        pageIndex: 1,
        pageSize: 80,
        totalCount: 0,
        Searchkey: "", //搜索关键字,
        values: [0, 0, 0],
        values0: "",
        values1: "",
        values2: "",
        localkey: localkey,
        localValus: localValus,
        IsDian: false,
        
        // isLeiren: false
      };
    },
    computed: {},
    methods: {
      //富文本图片
      replaceImgs(htmlText) {
        return htmlText.replace(
          /\s(src=")/g,
          ' width="100%" height="150px" src="http://www.hkqwgb.cn:8080'
        );
      },
       // 获取评论统计
      getIsDian() {
        console.log('赞的长度：'+this.localValus.zan.length)
        console.log('加油的长度：'+this.localValus.jiayou.length)
        console.log('雷人的长度：'+this.localValus.leiren.length)
        this.post("/community_activity/activity_vote_sta", {
          // wxId: 'o9g_ywar4_gvruoLGb-lkGUsEMbc',
          wxId: this.slow.userInfo.openId,
          id: this.DetailData.id
        }).then(r => {
          // r.list.forEach(element => {
          //   if (element.name === "赞") {
          //     this.values0 = element.value;
          //   }
          //   if (element.name === "加油") {
          //     this.values1 = element.value;
          //   }
          //   if (element.name === "雷人") {
          //     this.values2 = element.value;
          //   }
          // });
          console.log("aaa")
          console.log(r.object)
          console.log(r)
          if (r.object.toString() != '') {
            this.IsDian = true;
            console.log('为空')
          } 
        });
      },
      // 获取评论统计
      getsums() {
        console.log('赞的长度：'+this.localValus.zan.length)
        console.log('加油的长度：'+this.localValus.jiayou.length)
        console.log('雷人的长度：'+this.localValus.leiren.length)
        this.post("/community_activity/activity_vote_sta", {
          // wxId: 'o9g_ywar4_gvruoLGb-lkGUsEMbc',
          wxId: this.slow.userInfo.openId,
          id: this.DetailData.id
        }).then(r => {
          r.list.forEach(element => {
            if (element.name === "赞") {
              this.values0 = element.value;
            }
            if (element.name === "加油") {
              this.values1 = element.value;
            }
            if (element.name === "雷人") {
              this.values2 = element.value;
            }
          });
          // if (r.object.toString() == '') {
          //   this.IsDian = true;
          //   console.log('为空')
          // } else {
            // console.log('r.object有数据' + r.object)
            // this.IsDian = true;
            if (r.object === 0) {
              this.localValus.zan.push(1);
              this.localValus.jiayou.length = 0;
              this.localValus.leiren.length = 0;
              console.log('赞数量为：' + this.localValus.zan)
            }
            if (r.object === 1) {
              this.localValus.jiayou.push(1);
              this.localValus.zan.length = 0;
              this.localValus.leiren.length = 0;
              console.log('加油数量为：' + this.localValus.jiayou)
            }
            if (r.object === 2) {
              this.localValus.leiren.push(1);
              this.localValus.zan.length = 0;
              this.localValus.jiayou.length = 0;
              console.log('雷人数量为：' + this.localValus.leiren)
            }
            console.log(this.localValus.zan.length)
            console.log(this.localValus.jiayou.length)
            console.log(this.localValus.leiren.length)
          // }
        });
      },
      // 点赞
      comments(type, typeName) {
        if (this.IsDian == true) {
          this.$toast.fail("已经点评过了，无法重复点评");
          return;
        }
        this.post("/community_activity/activity_vote", {
          dataAreaCode: localStorage.getItem("dataAreaCode"),
          id: this.DetailData.id,
          userId: this.slow.userInfo ? this.slow.userInfo.openId : "o9g_ywar4_gvruoLGb-lkGUsEMbc",
          // userId: 'o9g_ywar4_gvruoLGb-lkGUsEMbc',
          userName: this.slow.userInfo ? this.slow.userInfo.nickname : "测试",
          type: type,
          typeName: typeName
        }).then(r => {
          this.getsums();
          if (r.success) {
            // this.IsDian = false;
            if (typeName === "赞") {
              this.localValus.zan.push(1);
              console.log('赞数量q' + this.localValus.zan)
            }
            if (typeName === "加油") {
              this.localValus.jiayou.push(1);
              console.log('加油数量q' + this.localValus.jiayou)
            }
            if (typeName === "雷人") {
              this.localValus.leiren.push(1);
              console.log('雷人数量q' + this.localValus.leiren)
            }
            console.log("this.localkey", this.localkey);
            window.localStorage.setItem(
              this.localkey,
              JSON.stringify(this.localValus)
            );
            this.$toast.success("投票成功");
          } else {
            this.$toast(r.message || "失败");
          }
        });
      },
      // 取消点赞
      removeLeiren(type, typeName) {
        if (this.IsDian == true) {
          this.$toast.fail("无法撤销!");
          return;
        }
        this.post("/community_activity/activity_vote_remove", {
          dataAreaCode: localStorage.getItem("dataAreaCode"),
          id: this.DetailData.id,
          userId: this.slow.userInfo ? this.slow.userInfo.openId : "8a4c60a170ec39780170f0759f720069",
          // userId: 'o9g_ywar4_gvruoLGb-lkGUsEMbc',
          userName: this.slow.userInfo ? this.slow.userInfo.nickname : "测试",
        }).then(r => {
          if (r.success) {
            this.localValus.zan = [];
            this.localValus.jiayou = [];
            this.localValus.leiren = [];
            console.log("this.localkey", this.localkey);
            window.localStorage.setItem(
              "localkey",
              JSON.stringify(this.localValus)
            );
          this.getsums();


      //       if (window.localStorage.getItem(localkey)) {
      //   this.localValus = JSON.parse(window.localStorage.getItem(localkey));
      //   console.log(this.localValus)
      // }

          console.log("bbb")
          console.log(this.localValus)
            this.$toast.success("取消投票成功");
          } else {
            this.$toast(r.message || "失败");
          }
        });
      },
      //获取报名人数
      loadBMNum() {
        this.post("/community_activity/participate_in_activities_number", {
            activityId: this.DetailData.id
          })
          .then(r => {
            this.BMrs = r.object;
          })
          .catch(err => {});
      },
      // 获取活动列表
      GetList() {
        this.$toast.loading({
          message: "加载中...",
          forbidClick: true
        });
        this.post("community_activity/loadInfo", {
            pageIndex: this.pageIndex,
            pageSize: this.pageSize,
            // dataAreaCode: sessionStorage.getItem("dataAreaCode"),
            title: this.Searchkey,
            startTime: "2019-01-01",
            endTime: "",
            activityType: this.activityType,
            activityStatus: this.activityStatus
          })
          .then(r => {
            this.$toast.clear();
            // this.listData = this.listData.concat(r.list);
            this.listData = r.list;
            this.totalCount = r.pageInfo.totalCount;
            this.pageIndex += 1;
          })
          .catch(err => {});
      },
      //浏览记录
      Records() {
        this.post("/community_activity/browseTimes", {
            activityId: this.DetailData.id
          })
          .then(r => {
            console.log("浏览次数");
          })
          .catch(err => {});
      },
      //报名状态
      GetSignUp() {
        this.post("/community_activity/participate_in_activities", {
          wxid: this.slow.userInfo.openId,
          // wxid:'o9g_ywafeOGzxbOQ_IQ7HXKOSDIM',
          activityId: this.DetailData.id,
          userName: this.slow.userInfo.nickname
        }).then(res => {
          if (res.flag == "false") {
            this.ifSignUp = res.flag;
          }
        });
      },
      // 点击报名
      participateIn() {
        console.log(this.slow.userInfo);
        if (!this.slow.isAuth) {
        // if (!this.slow.isAuth || this.slow.userInfo.subscribe == 0) {
          this.$router.push("/register");
        } else {
          //我要报名
          if (this.ifSignUp) {
            this.post("/community_activity/participate_in_activities", {
                wxid: this.slow.userInfo.openId,
                // wxid:'o9g_ywafeOGzxbOQ_IQ7HXKOSDIM',
                activityId: this.DetailData.id,
                userName: this.slow.userInfo.nickname
              })
              .then(r => {
                if (r.success == true) {
                  if (r.flag == "true") {
                    this.$toast(r.message || "参加活动成功！");
                  } else if (r.flag == "false") {
                    this.$toast(r.message || "不能重复参加活动！");
                  } else if (r.flag == "") {
                    console.log("暂时不清楚需要给什么提示");
                  }
                  this.ifSignUp = r.flag;
                } else {
                  this.$toast.fail("修改活动失败");
                }
              })
              .catch(err => {
                this.$toast.fail("服务器未反应，请稍后重试");
              });
          } else {
            this.$toast.fail("您已报名过该活动！");
          }
        }
      }
    },
    created() {
      this.DetailData = this.$route.query.DetailData;
      this.DetailData.description = this.replaceImgs(this.$route.query.DetailData.description); //富文本图片展示
      this.GetSignUp();
      this.loadBMNum();
      this.Records();
      this.getsums();
      this.getIsDian();
    }
  };
</script>
<style lang="scss">
  @import "~@/smobile.scss";
  .hdDetails_wrapper {
    padding: 0 5vw 5vw 5vw;
    overflow: hidden;
    .top {
      width: 90vw;
      height: 60px;
      line-height: 60px;
      background-color: #ffffff;
      display: flex;
      justify-content: space-between;
      align-items: center;
      img {
        width: 20px;
        height: 20px;
        float: left;
        margin-left: 10px;
        color: #999999;
      }
      .titler {
        text-align: center;
        font-size: 18px;
        font-weight: 500;
      }
    }
    .UpPart {
      width: 90vw;
      overflow: hidden;
      .top_img {
        display: block;
        width: 90vw;
        height: 40vw;
      }
      .text_box {
        padding: 4vw 0 2vw 0;
        display: flex;
        align-items: center;
        span:nth-child(1) {
          padding: 1.2vw 4vw;
          background: #4dd475;
          color: #ffffff;
          border-radius: 20px;
          margin-right: 15px;
          font-size: 12px;
        }
        span:nth-child(2) {
          display: inline-block;
          width: 70%;
        }
      }
      .Statistics {
        float: right;
        margin-bottom: 15px;
        img {
          display: inline-block;
          vertical-align: middle;
          width: 20px;
          height: 20px;
        }
        .sz {
          display: inline-block;
          margin-right: 15px;
        }
      }
    }
    .LowerPart {
      padding: 15px 0;
      .Situation {
        width: 90vw;
        display: flex;
        font-size: 18px;
        .fk {
          width: 6px;
          height: 25px;
          background: #2883f1;
          margin-right: 10px;
        }
      }
      .jl {
        margin-top: 15px;
      }
      .signUp {
        width: 90vw;
        display: flex;
        justify-content: space-between;
        .ckqb {
          color: #2970f9;
        }
        img {
          width: 20px;
          height: 20px;
          vertical-align: middle;
        }
      }
      .wenzi {
        p {
          margin: 10px 0;
          word-wrap: break-word;
        }
        p:nth-child(1) {
          margin-top: 0px;
        }
        p:nth-child(3) {
          img {
            display: inline-block;
            margin-right: 5px;
            width: 20px;
            height: 20px;
            vertical-align: middle;
          }
          span {
            color: #333333;
            font-weight: 700;
          }
        }
        .nlfb {
          display: inline-block;
          text-align: center;
          font-size: 12px;
          background: #e5b03e;
          padding: 1vw 2vw;
          border-radius: 4vw;
          color: #ffffff;
          margin-bottom: 20px;
        }
      }
      .wybm {
        width: 90vw;
        height: 40px;
        line-height: 40px;
        color: #ffffff;
        background: #16a1f7;
        text-align: center;
      }
      .wybmgry {
        width: 90vw;
        height: 40px;
        line-height: 40px;
        color: #ffffff;
        background: #919191;
        text-align: center;
      }
    }
  }
  .dslr {
    display: flex;
    margin-bottom: 15px;
    .icons {
      flex: 1;
      text-align: center;
      .tips {
        font-size: 12px;
      }
    }
  }
</style>